<template>
    <div class="page-main">
        <!-- 左侧菜单栏 -->
        <MenuModule></MenuModule>
        <!-- 右侧内容（包括顶部菜单栏） -->
        <div class="right-panel">
            <!-- 顶部菜单栏 -->
            <StatusColum></StatusColum>
            <!-- 主要页面内容 -->
            <div class="page-content" :class="isFoldMenuModule ? 'fold' : 'nofold'">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>
<script lang='ts'>
import { defineComponent, computed } from 'vue'
import MenuModule from '@/components/menuModule/menuModule.vue'
import StatusColum from '@/components/menuModule/statusColum.vue'
import { homeStore } from '@/store'
export default defineComponent({
    name: "",
    components: {
        MenuModule,
        StatusColum
    },
    setup() {
        // 是否折叠菜单栏
        const isFoldMenuModule = computed({
            get() {
                return homeStore().isFoldMenuModule
            },
            set(val: boolean) {
                homeStore().isFoldMenuModule = val
            }
        })

        return {
            isFoldMenuModule
        }
    },
})
</script>
<style lang="less" scoped>
@import "../less/default.less";

.page-main {
    display: flex;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;

    .right-panel {
        display: flex;
        flex-direction: column;
        flex: 1;
    }
}

.page-content {
    background: @pageContentBg;
    flex: 1;
    padding: 20px;
}
</style>
